import React from 'react';
import * as THREE from 'three';

export default function Index() {
  const refWrap = React.createRef();
  const refCanvas = React.createRef();

  const init = () => {
    refCanvas.current.width = refWrap.current.clientWidth;
    refCanvas.current.height = refWrap.current.clientHeight;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
    const renderer = new THREE.WebGLRenderer({ canvas: refCanvas.current });
    // renderer.setClearColor('#ffffff');

    // refWrap.current.appendChild(renderer.domElement);
    const geomctry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geomctry, material);
    scene.add(cube);
    camera.position.z = 2;
    const render = () => {
      renderer.render(scene, camera);
      requestAnimationFrame(() => {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.rotation.z += 0.01;
        render();
      });
    };
    render();
  };

  React.useEffect(() => {
    init();
  }, []);

  return (
    <div ref={refWrap} style={{ width: '100%', height: '100%' }}>
      <canvas ref={refCanvas}></canvas>
    </div>
  );
}
